import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    // listTree: [
    //   {
    //     title: 'parent2',
    //     id: '2',
    //     children: [
    //       {
    //         title: 'parent2,child0',
    //         id: '2-0',
    //         children: [{ title: 'parent2,child0,subChild0', id: '2-0-0' }]
    //       }
    //     ]
    //   }
    // ],
    list: [],
    // content: {
    //   default: 'default content'
    // },
    // 记录一下输入三级标题，在面包屑中渲染
    subTitle: '',
    // 记录一下二级标题，在面包屑中渲染
    aTitle: '',
    // 记录一下输入的值，绑定到标题上面
    inputVal: '',
    // 默认的文本内容
    defaultContent: 'content',
    // 分割并获取目录名
    titles: [],
    // about中的dynamic的数据
    dynamicChildren: [],
    // 用户的缓存
    cache: [],
    // 原来data中的数据
    setNameDialogVisiblility: true,
    // inputText: '',
    // 默认显示内容，根据路径名匹配，待实现
    // 阉割版，判断文件名的结尾，如果是.json显示default json
    defaultText: '',
    newName: '',
    copyTitle: '',
    inputContent: '',
    oldName: '',
    copyChildren: []
  },
  mutations: {
    // 初始化list
    initList(state, list) {
      state.list = list
    },

    // 把cache json文件获取的数据赋值给dynamicChildren
    initCache(state, list) {
      state.cache = list
    },
    // 无localStorage时候
    // initFromJSON
    initFromJSON(state, list) {
      state.dynamicChildren = list
    },

    setTitle(state, title) {
      state.newName = title
    },

    // 新建文件夹
    appendSync(state, data) {
      // const children = data.children || []
      // children.push({
      //   title: 'appended node',
      //   expand: true
      // })
      // this.$set(data, 'children', children)
      // this.initChildren(data)
      // data5里面的children
      const children = data.children || []
      // console.log('children', children)
      // 双向绑定一个title的名字
      children.push({
        title: state.newName,
        expand: true,
        contextmenu: true
      })
      Vue.set(data, 'children', children)
      // // console.log('this.children', this.children)
      // this.ifImport()
      // // 保存data.children然后在读取 JSON.stringify
      // // this.initChildren(this.children)
      // // 自动保存
      // this.saveCache()
    },
    // 循环数组，但是data除了自己的title还有children数组的title,data属性是一大坨，直接复制用的时候依旧需要拿出来
    // title和children数组
    appendChildrenSync(state, data) {
      // 循环里面的所有数组
      const children = data.children || []
      // title里面有children
      console.log('state.copyChildren', state.copyChildren)
      // console.log('children', children)
      // 双向绑定一个title的名字
      children.push({
        title: state.copyChildren.title,
        expand: true,
        contextmenu: true
      })
      Vue.set(data, 'children', children)
      // ============================================
      // const children = data.children || []
      // // 孩子文件
      // children.push({
      //   title: state.copyChildren.children[0].title,
      //   expand: true,
      //   contextmenu: true
      // })
      // Vue.set(data.children, 'children', children)
      // 无限循环如何实现？
      const subChildren = data.children || []
      for (let i = 0; i < children.length(); i++) {
        subChildren.push({
          title: state.copyChildren.children[i].title,
          expand: true,
          contextmenu: true
        })
        Vue.set(data.children, 'children', subChildren)
      }
    },
    // 添加文件
    addSync(state, data) {
      const children = data.children || []
      // console.log('children', children)
      // 双向绑定一个title的名字
      children.push({
        title: state.newName,
        contextmenu: true
      })
      Vue.set(data, 'children', children)
    },
    // // 删除操作
    // removeSync(state, root, node, data) {
    //   const parentKey = root.find(el => el === node).parent
    //   const parent = root.find(el => el.nodeKey === parentKey).node
    //   const index = parent.children.indexOf(data)
    //   parent.children.splice(index, 1)
    // },

    // 复制操作
    // 就是复制当前节点的信息到一个地方
    copySync(state, data) {
      state.copyTitle = data.title
    },
    copyChildrenSync(state, data) {
      state.copyChildren = data
      console.log('copyChildrenSync', state.copyChildren)
    },
    // 粘贴操作
    pasteSync(state, data) {
      const children = data.children || []
      // console.log('children', children)
      // 双向绑定一个title的名字
      children.push({
        title: state.copyTitle,
        expand: true
      })
      Vue.set(data, 'children', children)
    },

    // // 添加li
    // // 每个标题都应该是一个独立的对象而且拥有children数组用来遍历渲染列表
    // // title属性就是文件名
    // // root是根目录，所有的属性在root的children数组里面添加对象
    // addLi(state) {
    //   state.listTree.children.push({
    //     title: `child${state.count}`,
    //     id: state.count,
    //     children: []
    //   }),
    //     (state.count += 1)
    // },

    // // 添加字标签的子元素
    // addChildLi(state, titleValue) {
    //   if (state.listTree.children.title === titleValue) {
    //     state.listTree.children.children.push({
    //       title: `subchild${state.count}`,
    //       id: state.count,
    //       children: []
    //     }),
    //       (state.count += 1)
    //   }
    // },

    // 展示字标签对应的内容
    // 可以判断字符串的结尾来写不同的默认值
    // showContent(state, keys) {
    //   state.defaultContent = keys
    // },

    showContent(state, data) {
      // 如果名称存在，避免双击产生bug，因为点击的第二下是半选所以此时的data是没有title的！
      if (data[0] && data[0].title) {
        console.log('data', data[0].title)
        // 改变content的内容,根据文件名
        const title = data[0].title

        const content = title.split('.')
        if (content) {
          state.defaultText = content[1]
        }
      }
    },

    // showCrumb(state, title) {
    //   // state.aTitle = state.listTree.children.title
    //   // state.subTitle = state.listTree.children.children.title

    //   state.titles = title.split('/')
    //   state.aTitle = state.titles[0]
    //   state.subTitle = state.titles[1]
    //   console.log('title', title)
    //   console.log('titles', state.titles)
    //   console.log('atitles', state.aTitle)
    //   console.log('subtitles', state.subTitle)
    // },

    // 点击新增按钮得事件触发一个添加的框

    clearInput(state) {
      // 清空内容的事件
      state.inputText = ''
    },
    // 判断一下是不是加载上了
    ifImport(state) {
      console.log('aboutChildren', state.aboutChildren)
    },

    // 数据持久化，读取数据,
    // Computed property "dynamicChildren" was assigned to but it has no setter.
    // 需要把数据添加响应式
    // vuex改变数据需要通过setter？
    // localStorage2Json() {
    //   console.log('localStorage2Json')
    //   const getLocalData = localStorage.getItem('localData')
    //   this.dynamicChildren = JSON.parse(getLocalData)
    //   console.log('JSON.parse(getLocalData)', JSON.parse(getLocalData))
    // },

    // 保存数据并存入localStorage
    // 修改数据之后会自动保存
    json2LocalStorage(state, jsonData) {
      console.log('json2LocalStorage')
      const str_jsonData = JSON.stringify(jsonData)
      localStorage.setItem('localData', str_jsonData)
    },

    // 数据持久化，读取数据,
    // Computed property "dynamicChildren" was assigned to but it has no setter.
    // 需要把数据添加响应式
    // vuex改变数据需要通过setter？
    localStorage2Json(state) {
      console.log('localStorage2Json')
      console.log(localStorage.getItem('localData'))
      // 添加localStorage的容错
      if (localStorage.getItem('localData') !== 'undefined') {
        const getLocalData = localStorage.getItem('localData')
        state.cache = JSON.parse(getLocalData)
        console.log('JSON.parse(getLocalData)', JSON.parse(getLocalData))
        console.log('state.cache', state.cache)
      }
    },

    // // 一旦列表出现变化就更新cache
    // cache(data) {
    //   this.cache =
    // },
    // 自动读取
    // 自动点击一次init就可以了
    autoRead() {
      console.log('autoRead')
      // 第一次进入页面自动click 恢复按钮
    },
    cache(state, input) {
      state.cache = input
    },
    // cacheCut(state, input){
    //   state.cache.
    // },
    editTreeName(state, data) {
      state.oldName = data.title
      state.inputContent = data.title
    }
  },

  actions: {
    // 新建文件
    addAsync(context, data) {
      context.commit('addSync', data)
    },

    // 新建文件夹
    appendAsync(context, data) {
      context.commit('appendSync', data)
    },
    // // 用来处理复制的是一个文件夹的情况
    // appendChildrenAsync(context, data) {
    //   context.commit('appendChildrenSync', data)
    // },

    // 异步获取菜单树列表
    getList(context) {
      axios.get('/list.json').then(({ data }) => {
        console.log(data)
        // 获取data之后把data给commit到state的list中，相当于动态的添加list的内容
        context.commit('initList', data)
      })
    },

    // 异步获取菜单树列表
    getDynamicChildren(context) {
      axios.get('/children.json').then(({ data }) => {
        console.log(data)
        // 获取data之后把data给commit到state的list中，相当于动态的添加list的内容
        context.commit('initFromJSON', data)
      })
    },

    // 执行读取localStorage的操作
    setCache(context) {
      context.commit('localStorage2Json')
    },
    pasteAsync(context, data) {
      context.commit('pasteSync', data)
    },
    copyAsync(context, data) {
      if (data.children) {
        context.commit('copyChildrenSync', data)
      } else {
        context.commit('copySync', data)
      }
      // context.commit('copySync', data)
    },
    // copyChildrenAsync(context, data) {
    //   context.commit('copyChildrenSync', data)
    // },
    editTreeAsync(context, data) {
      context.commit('editTreeName', data)
    }
    // cutAsync(context, root, node, data) {
    //   context.commit('copySync', data)
    //   context.commit('removeSync', root, node, data)
    // },
    // // 剪切操作
    // cutSync(state,root, node, data) {
    //   this.copy(data)
    //   this.remove(root, node, data)
    // },
    // removeAsync(context, root, node, data) {
    //   context.commit('removeSync', root, node, data)
    // }
  },

  getters: {
    // showTree(state) {
    //   return '当前的目录树为' + state.listTree.name + ''
    // }
  },

  modules: {}
})
